<template>
	<div class="mobile_Login">
		<div style="height: 300px;"></div>
			<div class="up">
				<div class="user">
					<div class="loginName">
						<p>手机端登录</p>
					</div>
					<div><input v-model="user.username" placeholder="账号名/手机号/邮箱" /></div>
					<div><input v-model="user.password" placeholder="密码" /></div>
					<div class="but"><button @click="login()">登录</button></div>
				</div>
			</div>
	</div>

</template>

<script>
	import Vue from 'vue'
	export default {
		name: "login",
		components: {},
		data() {
			return {
				user: {},
			}
		},
		methods: {
			password() {
				this.act = 1
			},
			Sms() {
				this.act = 2
			},
			login() {
				console.log("kv=" + this.user);
				this.$postKv("/api/login", this.user)
					.then((resp) => {
						console.log(resp.data);
						let token = resp.data.data.token;
						window.localStorage.setItem("token", token);
						if(resp.data.code!=200){
							alert('账号或密码错误请重新登录')
						}
						this.$get("/api/user/info")
							.then((resp) => {
								console.log(resp.data.data)
								window.localStorage.setItem("account", resp.data.data.account);
								this.$router.push("/mobile/user")
							})
					});
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.mobile_Login {
		text-align: center;
		background-color: #F5D5A0;
		width: 100%;
		height: 51rem;
	}

	.up {
		
		margin-left: 13%;
		width: 70%;
		/* height: inherit; */
		background-color: #FFA500;

	}

	.user {
		border: #715E3E 1px solid;
		display: flex;
		height: inherit;
		align-items: center;
		flex-direction: column;
	}

	.loginName p {
		text-align: center;
	}

	.but button {
		margin-top: 5%;
		margin-left: 5%;
		width: 100px;
	}

	.user input {
		margin-top: 5%;
		width: 80%;
		margin-left: 9%;
	}
</style>
